<template>
	<view class="good_detail_main">

		<view class="data_content">
			<page-meta :page-scrollable="!isPopupVisible"></page-meta>

			<!-- 顶部的轮播图 -->
			<view class="swiper_bg">
				<view class="return_share">
					<view class="return_view" @click="returnPreviousPage">
						<uni-icons type="arrow-left" size="26" class="invert_style"></uni-icons>
					</view>
					<view class="share_view" @click="shareFunc">
						<uni-icons type="redo-filled" size="24" class="invert_style"></uni-icons>
					</view>
				</view>
				<uni-swiper-dot :info="swiperList" :current="currentSwiper" field="content" :mode="swiperMode">
					<swiper @change="swiperChange" class="swiperitem_image" circular="true" autoplay="true"
						interval="3000" duration="1000" @click="handleSwiperClick">
						<swiper-item v-for="(item ,index) in swiperList" :key="index">
							<image :src="item" mode="aspectFill" class="swiperitem_image"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 中间信息 -->
			<view class="middle_section">
				<view class="good_title">
					{{goodInfos.goodTitle}}
				</view>
				<view class="good_labels">
					<view class="good_label_per" v-for="label in goodInfos.goodLabels">
						{{label}}
					</view>
				</view>
				<view class="price_points">
					<view class="price_text">
						{{goodInfos.goodPrice}}
					</view>
					<view class="points">
						<view class="point_iocn_view">
							<image src="../../../../static/icons/integral.png" mode="aspectFill" class="point_icon">
							</image>
						</view>
						<view class="points_text">
							{{goodInfos.needPoints}}
						</view>
					</view>
				</view>
				<view class="stock_package">
					<view class="stock_main">
						现有库存：{{goodInfos.stockNum}}
					</view>
				</view>

				<view class="divider_line"></view>
				<view class="selected_num_main">
					<view class="selected_num_text">
						<text class="selected_text">已选</text> {{goodInfos.selectedStyle}}
					</view>
					<uni-icons type="forward" size="22" color="#999999" class="forward_icon"
						@click="openGoodStyleModal(true)"></uni-icons>
				</view>
				<view class="divider_line"></view>
				<view class="user_reviews_main">
					<view class="user_review_top">
						<view class="user_review_title">
							用户评价
						</view>
						<view class="user_review_num_icon">
							<view class="review_num">
								{{goodInfos.userReviewNum}}条评价
							</view>
							<view class="user_review_icon">
								<uni-icons type="forward" size="20" color="#999999"></uni-icons>
							</view>
						</view>
					</view>
					<view class="user_review_content">
						<view class="user_review_per" v-for="(review,index1) in goodInfos.userReviews" :key="index1">
							<view class="user_avatar_username_time">
								<view class="user_avatar_user_name">
									<view class="user_review_avatar_view">
										<image :src="review.userAvatar" mode="aspectFill" class="user_review_avatar">
										</image>
									</view>
									<view class="user_name">
										{{review.userName}}
									</view>
								</view>
								<view class="user_review_time">
									{{review.reviewReleaseTime}}
								</view>
							</view>
							<view class="review_content_main">
								{{review.briefReviews}}
							</view>
							<view class="user_review_images">
								<view class="user_review_imageper_view" v-for="(imageUrl,index2) in review.shareImages"
									:key="index2">
									<image :src="imageUrl" mode="aspectFill" class="user_review_imageper"></image>
								</view>
								<text class="user_review_images_num" v-if="review.shareImages.length !== 0">
									{{review.shareImageNum}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="good_image_infos">
				<view class="good_image_info_per_view" v-for="(infoImageUrl,index) in goodInfos.goodDetailInfoImages"
					:key="index">
					<image :src="infoImageUrl" mode="aspectFill" class="good_image_info_per"></image>
				</view>
			</view>
		</view>

		<!-- 底部购物车，立即购买，联系客服，收藏等图标 -->
		<view class="goods-carts">
			<view class="collection_view">
				<uni-icons :type="heartType" size="20" :color="heartColor" @click="clickHeart"></uni-icons>
				<view class="heart_text">
					{{collectText}}
				</view>
			</view>
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" class="change_uni_goods_nav_style" />
		</view>

		<!-- 提示窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="取消" confirmText="确定" title="提示" content="亲,真的要取消收藏吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share></uni-popup-share>
		</uni-popup>

		<!-- 点击立即购买，弹窗 -->
		<uni-popup ref="buyNowPopup" type="button" safeArea :mask-click="false">
			<view class="good_style_main">
				<view class="top_image_money_icons">
					<view class="top_good_imgae">
						<image :src="goodStyle.showPhoto" mode="aspectFill" class="top_good_imgae"></image>
					</view>
					<view class="top_good_price_record">
						<view class="good_price_record">
							<view class="good_price">
								{{goodStyle.goodPrice}}
							</view>
							<view class="good_icon_record">
								<view class="good_record_image">
									<image src="../../../../static/icons/integral.png" mode="aspectFill"
										class="record_img"></image>
								</view>
								<view class="goodStyle_records">
									{{goodStyle.records}}
								</view>
							</view>
						</view>
						<view class="good_name_style">
							{{goodStyle.goodName}}
						</view>
						<view class="good_name_style">
							{{goodStyle.goodSelectStyle}}
						</view>
					</view>
					<view class="cancel_icon_view" @click="closeGoodStylePopup">
						<uni-icons type="closeempty" size="26" color="#000"></uni-icons>
					</view>
				</view>
				<view class="color_select_main">
					<view class="color_select_area">
						<view class="color_select_per" v-for="(item,index) in goodStyle.styles" :key="index">
							<view class="color_select_text">
								{{item.styleName}}
							</view>
							<view class="style_items_view">
								<view class="style_items" v-for="(item1,subIndex) in item.styleItens" :key="subIndex">								
									<view class="color_selected_per" v-if="selectedStyles[item.styleName] === item1">
										{{item1}}
									</view>
									<view class="color_unselect_per" v-else @click="selectStyle(item.styleName, item1)">
										{{item1}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 购买数量 -->
				<view class=" buy_number_main">
					<view class="buy_number_text">
						购买数量: 限购{{goodStyle.xiangouNum}}件
					</view>
					<view class="jiajian_btn">
						<uni-number-box v-model="goodStyle.buyNumber" :min="1" :max="goodStyle.xiangouNum"
							color="#01c6c1" background="#e6e6e6"></uni-number-box>
					</view>
				</view>
				<view class="buy_now_btn_view">
					<view class="add_cart_view" :class="{'add_cart_view_without_buy_now': isShowBuyNow === false}"
						@click="addCart">
						加入购物车
					</view>
					<view class="buy_now_view" v-if="isShowBuyNow">
						立即购买
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getGoodsDetailInfo,
		getThisStyleInfoApi,
		cancelCollectGoods,
		collectGoods,
		addCartApi,
		getCurrentStyleAid,
	} from '@/request/goods.js';

	export default {
		data() {
			return {
				isShowBuyNow: false, // 弹窗内两个按钮（加入购物车，立即购买）控制立即购买按钮是否显示
				heartType: 'heart',
				collectText: '收藏',
				heartColor: '#666666', // 爱心颜色s
				// 轮播图信息
				swiperList: [
					'http://t14.baidu.com/it/u=3802033903,720237057&fm=224&app=112&f=JPEG?w=264&h=500',
					'https://img0.baidu.com/it/u=2000438003,1607508639&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
					'https://img1.baidu.com/it/u=3548014672,976343356&fm=253&fmt=auto&app=120&f=JPEG?w=475&h=475',
					'https://img2.baidu.com/it/u=684376190,990770046&fm=253&fmt=auto&app=138&f=JPEG?w=390&h=376',
					'https://img1.baidu.com/it/u=3142011253,1516296701&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=601',
					'https://img1.baidu.com/it/u=2938823145,3401489524&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310',
					'https://img2.baidu.com/it/u=3512701741,3454841903&fm=253&fmt=auto&app=138&f=PNG?w=750&h=500'
				],
				currentSwiper: 0,
				swiperMode: 'default',
				goodInfos: {
					goodAid: 1, // 商品aid
					goodCode: 0, // 商品编号
					goodTitle: '碳纤维折叠登山杖',
					goodLabels: [
						'1秒速开',
						'单根仅重210g'
					], // 商品标签
					goodPrice: '¥499', // 商品价格
					needPoints: 4990, // 需要积分
					stockNum: 100, // 现有库存数量
					selectedStyle: '数量 X 1', // 已选样式（数量或者其他单位）
					userReviewNum: 3412,
					userReviews: [{
							userAvatar: 'https://img1.baidu.com/it/u=3515578383,3294939204&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
							userName: 'fantasy',
							reviewReleaseTime: '2023-10-23',
							briefReviews: '入手登山杖，三段式调节，握把舒适，这个季节爬山最合适！',
							shareImages: [
								'https://t12.baidu.com/it/u=2670985664,234135186&fm=30&app=106&f=JPEG?w=608&h=816&s=7CB833D5689366DC1F31750D0300F0E0',
								'https://img0.baidu.com/it/u=3952249941,408032556&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
								'http://t14.baidu.com/it/u=3942856557,3708488195&fm=224&app=112&f=JPEG?w=500&h=500'
							],
							shareImageNum: 9
						},
						{
							userAvatar: 'https://img0.baidu.com/it/u=3585421510,222513639&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
							userName: '沙溢',
							reviewReleaseTime: '2024-09-01',
							briefReviews: '登山杖收到啦！做工细致，操作简便，期待下次徒步可以发挥作用！',
							shareImages: [
								'https://img0.baidu.com/it/u=1621176228,1249725551&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
								'https://img2.baidu.com/it/u=1903528376,3391050185&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=405',
							],
							shareImageNum: 2
						},
						{
							userAvatar: 'https://img0.baidu.com/it/u=2735904299,1592700273&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
							userName: '行走的咖啡猫',
							reviewReleaseTime: '2019-10-01',
							briefReviews: '今天下单顺丰快递第二天上午就到了，两根杖很轻便，颜值也特别高，登山必备，物有所值。',
							shareImages: [
								'https://img1.baidu.com/it/u=1376986429,2256235792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
								'https://img2.baidu.com/it/u=3573861158,1841192584&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
								'https://img0.baidu.com/it/u=1582889068,4177780944&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=670'
							],
							shareImageNum: 3
						},
					],
					goodDetailInfoImages: [
						'https://img2.baidu.com/it/u=3046529022,2105799842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=774',
						'https://img1.baidu.com/it/u=1294234086,1821455433&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=774',
						'https://img1.baidu.com/it/u=1999267214,786261212&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1038',
						'https://img1.baidu.com/it/u=2029085056,3740668599&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
						'https://img1.baidu.com/it/u=2465578778,3638511625&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1077'
					],
				},
				goodStyle: {
					showPhoto: 'http://t14.baidu.com/it/u=3802033903,720237057&fm=224&app=112&f=JPEG?w=264&h=500',
					styles: [{
							styleName: '颜色选择',
							styleItens: ['白色', '棕色', '黑色']
						},
						{
							styleName: '重量选择',
							styleItens: ['210g', '250g']
						}
					],
					goodStyleAid: 1,
					goodPrice: '¥0',
					records: '0',
					goodName: '',
					goodSelectStyle: '',
					xiangouNum: 0, // 限购多少件
					buyNumber: 0, // 购买数量
				}, // 选择商品样式
				selectedStyles: {}, // 用于记录已选择的每个样式组下的具体样式
				options: [{
					icon: 'chat',
					text: '客服',
					info: 0,
					infoBackgroundColor: '#ff5230',
					infoColor: "#f8f8f8"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "#fcfcfc"
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				isCollect: false, // 是否收藏
				isPopupVisible: false,
			}
		},
		onLoad(option) {
			// console.log(option);
			// console.log(option.goodAid);
			// console.log(typeof option.goodAid); // string类型的
			// 获取商品的全部信息
			this.getGoodsAllInfo(option.goodAid);
		},

		methods: {

			// 获取商品的全部信息
			getGoodsAllInfo(goodAid) {
				const param = {
					goodAid: goodAid,
				}
				getGoodsDetailInfo(param).then(res => {
					// console.log(res);
					this.swiperList = res.data.data.swiperList;
					this.isCollect = res.data.data.isCollect;
					this.goodStyle = res.data.data.goodStyle;
					this.goodInfos = res.data.data.goodInfo;
					this.collectText = res.data.data.collectText;
					this.heartColor = res.data.data.heartColor;
					this.heartType = res.data.data.heartType;
					// 购物车内的商品数量
					this.options[1].info = res.data.data.currentLoginUserCartGoodsNum;
					// 该商品的客服未读消息
					this.options[0].info = res.data.data.productUnreadMessageNum;
					// 设置初始的样式选择
					this.setDefaultStyle();
					// console.log(res.data.data.goodStyle);
					// console.log(this.goodStyle);
				})
			},

			// 设置初始的样式选择
			setDefaultStyle() {
				// console.log();
				this.goodStyle.styles.forEach(styleGroup => {
					if (styleGroup.styleItens.length > 0) {
						this.selectedStyles[styleGroup.styleName] = styleGroup.styleItens[0];
					}
				});
			},
			
			// 获取当前样式aid
			getCurrentStyleAid(){
				this.goodStyle.goodSelectStyle = Object.values(this.selectedStyles).join(",");
				const params = {
					goodAid: this.goodInfos.goodAid,
					currentStyleName: this.goodStyle.goodSelectStyle
				}
				// console.log(params);
				getCurrentStyleAid(params).then(res=>{
					// console.log(res);
					this.goodStyle.goodStyleAid = res.data.data;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title:"请稍后再试...",
						icon: 'error'
					})
				})
			},
			
			// 加入购物车操作
			addCart(){
				// console.log("加入");							
				const data = {
					goodAid: this.goodInfos.goodAid,
					goodsStyleAid: this.goodStyle.goodStyleAid,
					styleCount: this.goodStyle.buyNumber,
				}
				// console.log(data);
				addCartApi(data).then(res=>{
					// console.log(res);
					this.$refs.buyNowPopup.close();
					uni.showToast({
						title:'已加入购物车',					
					})					
					this.getGoodsAllInfo(this.goodInfos.goodAid);
				}).catch(err=>{
					console.log(err);
					uni.showToast({
						title:'请稍后再试...',
						icon: 'error'
					})
				})
			},

			// 选择商品样式
			selectStyle(styleGroupName, styleItem) {
				// console.log(styleGroupName,styleItem);
				// 更新已选择的样式记录
				this.selectedStyles[styleGroupName] = styleItem;
				// console.log(this.selectedStyles[styleGroupName]);				
				// console.log(this.selectedStyles);
				// console.log(this.selectedStyles[styleGroupName] === styleItem);
				this.goodStyle.goodSelectStyle = Object.values(this.selectedStyles).join(" ");
				// 选择完毕之后请求后端返回该样式的价格，积分，库存等
				this.getThisStyleInfo();
			},

			// 选择完毕之后请求后端返回该样式的价格，积分，库存等
			getThisStyleInfo() {
				const params = {
					style: this.goodStyle.goodSelectStyle,
					goodAid: this.goodInfos.goodAid,
				}
				getThisStyleInfoApi(params).then(res => {
					// console.log(res);
					if (res.data.data !== null) {
						const data = res.data.data;
						const styleGood = this.goodStyle;
						styleGood.goodStyleAid = data.goodStyleAid;
						styleGood.goodPrice = data.goodPrice;
						styleGood.showPhoto = data.showPhoto;
						styleGood.records = data.records;
						styleGood.xiangouNum = data.xiangouNum;
					}
					// console.log(this.goodStyle);
				})
			},

			handleSwiperClick(event) {
				// 获取当前点击的图片索引
				let currentIndex = this.getCurrentIndex(event);
				uni.previewImage({
					urls: this.swiperList,
					current: this.swiperList[currentIndex]
				});
			},
			getCurrentIndex(event) {
				// 根据点击事件获取当前点击的轮播图索引，具体实现可能因轮播图组件的内部结构而不同
				// 这里假设可以通过event.target.dataset.index获取索引
				return event.target.dataset.index;
			},

			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			// 返回上一页
			returnPreviousPage() {
				uni.navigateBack();
			},
			// 点击爱心图标
			clickHeart() {
				if (this.isCollect) {
					this.$refs.alertDialog.open();
				} else {
					const params = {
						goodAid: this.goodInfos.goodAid
					}
					collectGoods(params).then(res => {
						if (res.data.code === 10000) {
							uni.showToast({
								title: '收藏成功',
								duration: 1000,
							})
							this.heartType = 'heart-filled';
							this.collectText = '已收藏';
							this.heartColor = '#ff1c1c'
							this.isCollect = true;
						} else {
							uni.showToast({
								title: '稍后再试！',
								icon: 'error'
							})
						}
					}).catch(err => {
						console.log(err);
						uni.showToast({
							title: '稍后再试！',
							icon: 'error'
						})
					})

				}
			},
			onClick(e) {
				if (e.index === 0) {
					// 去客服聊天页面
					uni.navigateTo({
						url: '/pages/friendsChat/chatPage/chatRoomPage'
					})
				} else if (e.index === 1) {
					// 去购物车页面
					uni.navigateTo({
						url: '/pages/tabBar/extUI/shopping_topBar/cartPage'
					})
				}
			},
			buttonClick(e) {
				// console.log(e)
				// console.log(this.options);
				if (e.index === 0) { // 加入购物车
					this.isShowBuyNow = false;
					this.$refs.buyNowPopup.open('bottom');
					// this.options[1].info++;
					// 后端购物车表添加
					this.getCurrentStyleAid();
				} else if (e.index === 3) {
					// console.log('立即购买');
					this.$refs.buyNowPopup.open('bottom');
				}
			},
			dialogConfirm() {
				// 调用后端：取消收藏
				const params = {
					goodAid: this.goodInfos.goodAid
				}
				cancelCollectGoods(params).then(res => {
					if (res.data.code === 10000) {
						uni.showToast({
							title: '已取消收藏',
							duration: 1000,
						})
						this.collectText = '收藏';
						this.heartType = 'heart';
						this.heartColor = '#666666';
						this.isCollect = false;
					} else {
						uni.showToast({
							title: '稍后再试！',
							icon: 'error'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '稍后再试！',
						icon: 'error'
					})
				});

			},

			// 右上角分享图标
			shareFunc() {
				this.$refs.share.open();
			},

			// 关闭商品选择样式的弹窗
			closeGoodStylePopup() {
				this.isPopupVisible = false; // 关闭弹窗后，将isPopupVisible设为false，页面恢复滚动				
				this.$refs.buyNowPopup.close();
			},

			// 打开商品样式选择弹窗
			openGoodStyleModal(buyNowShow) {
				this.isPopupVisible = true; // 将isPopupVisible设为true，表示弹窗要显示了，同时也意味着页面应该禁止滚动
				this.isShowBuyNow = buyNowShow;
				this.$refs.buyNowPopup.open('bottom');
								
				// 获取当前样式aid
				this.getCurrentStyleAid();
			},

		},
	}
</script>

<style scoped>
	.good_detail_main {
		width: 100%;
		/* background-color: #01c6c1; */
		/* 在父元素或者合适的外层元素上设置，将其内部元素放入新层叠上下文 */
		/* isolation: isolate; */
	}

	.swiper_bg {
		width: 100%;
	}

	.swiperitem_image {
		width: 100%;
		height: 40vh;
	}

	.return_share {
		position: absolute;
		top: 60rpx;
		z-index: 100;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 92%;
		left: 50%;
		transform: translateX(-50%);
	}

	.invert_style {
		filter: invert(50%) brightness(200%);
	}

	.point_icon {
		width: 17px;
		height: 17px;
	}

	.middle_section {
		margin-top: 30px;
	}

	.good_title {
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 2px;
		padding-left: 25px;
	}

	.good_labels {
		font-size: 11px;
		letter-spacing: 1px;
		padding-left: 25px;
		display: flex;
		flex-direction: row;
		margin-top: 10px;
	}

	.good_label_per {
		background-color: #eeeeee;
		padding: 7px;
		border-radius: 10px;
		margin-right: 7px;
	}

	.price_points {
		display: flex;
		flex-direction: row;
		font-size: 24px;
		font-weight: 600;
		padding-left: 25px;
		margin-top: 16px;
	}

	.price_text {
		margin-right: 20px;
	}

	.points {
		display: flex;
		flex-direction: row;
	}

	.point_iocn_view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 4px;
	}

	.divider_line {
		margin-left: 25px;
		margin-right: 25px;
		height: 1px;
		border-top: 1px solid;
		border-top-color: #cccccc;
		margin-top: 20px;
	}

	.stock_package {
		display: flex;
	}

	.stock_main {
		margin-left: 25px;
		margin-top: 2px;
		font-size: 11px;
		letter-spacing: 1px;
		padding: 7px;
		background-color: #eeeeee;
		border-radius: 8px;
	}

	.selected_num_main {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}

	.selected_num_text {
		margin-left: 25px;
		display: flex;
		flex-direction: row;
		font-size: 16px;
		color: #0b0b0b;
		letter-spacing: 2px;
	}

	.selected_text {
		color: #a7a7a7;
		margin-right: 15px;
	}

	.forward_icon {
		position: relative;
		right: 25px;
	}

	.user_reviews_main {
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.user_review_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 25px;
		padding-right: 25px;
		letter-spacing: 2px;
		font-size: 15px;
	}

	.user_review_num_icon {
		display: flex;
		flex-direction: row;
	}

	.review_num {
		color: #a7a7a7;
		margin-left: 10px;
	}

	.user_review_avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.user_review_content {
		padding-left: 25px;
		margin-top: 20px;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		display: flex;
		flex-direction: row;
		overflow-y: hidden;
		padding-bottom: 30px;
	}

	.user_review_content::-webkit-scrollbar {
		display: none;
	}

	.user_avatar_username_time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.user_avatar_user_name {
		display: flex;
		flex-direction: row;
	}

	.user_name {
		color: #0b0b0b;
		letter-spacing: 1px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user_review_per {
		margin-right: 20px;
		width: 80%;
		padding: 15px;
		border: 1px solid;
		border-color: #dddddd;
		box-shadow: 2px 2px 5px 1px #ccc;
		border-radius: 10px;
		flex-shrink: 0;
		scroll-snap-align: end;
		scroll-margin-left: 40px;
	}

	.user_review_avatar_view {
		display: flex;
		flex-direction: row;
	}

	.user_review_imageper {
		width: 155rpx;
		height: 155rpx;
	}

	.user_review_imageper_view {
		margin-right: 7rpx;
	}

	.user_review_images {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.good_image_infos {
		/* height: 5000px; */
		margin-top: 50px;
		display: flex;
		flex-direction: column;
	}

	.good_image_info_per_view {}

	.review_content_main {
		margin-top: 15px;
		letter-spacing: 1px;
		margin-bottom: 10px;
		line-height: 25px;
		height: 50px;
		overflow: hidden;
		word-wrap: break-word;
	}

	.user_review_time {
		display: flex;
		flex-direction: column;
		justify-content: center;
		letter-spacing: 1px;
		font-size: 13px;
		color: #a7a7a7;
	}

	.user_review_images_num {
		font-size: 24px;
		font-weight: 600;
		z-index: 1;
		position: relative;
		top: 40px;
		right: 55rpx;
		color: white;
		mix-blend-mode: difference;
	}

	.good_image_info_per {
		/* width: 90%;
		height: 80vh; */
		width: 100vw;
		height: 1000rpx;
	}

	/* 	
	.bottom_icons{
		position: sticky;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: #ffffff;
		border-radius: 10px;
	} */

	.goods-carts {
		display: flex;
		flex-direction: row;
		/* -webkit-position: fixed; */
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		width: 100%;
		/* z-index: 100; */
	}

	.collection_view {
		width: 10%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #666666;
	}

	.heart_text {
		width: 100%;
		text-align: center;
		font-size: 12px;
	}

	.top_good_imgae {
		width: 200rpx;
		height: 200rpx;
	}

	.record_img {
		width: 25rpx;
		height: 25rpx;
	}

	.top_image_money_icons {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.good_style_main {
		background-color: #fff;
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 30rpx;
		padding-bottom: 50rpx;
	}

	.top_image_money_icons {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.good_price_record {
		display: flex;
		flex-direction: row;
	}

	.good_icon_record {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
	}

	.good_price {
		font-size: 35rpx;
		font-weight: bold;
	}

	.goodStyle_records {
		font-size: 35rpx;
		font-weight: bold;
	}

	.top_good_price_record {
		margin-right: 50rpx;
	}

	.good_name_style {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #9a97ab;
	}

	.color_select_main {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;
	}

	.color_select_text {
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #6c6d74;
		margin-top: 30rpx;
	}

	.style_items_view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.style_items {
		margin-top: 30rpx;
		margin-right: 40rpx;
	}

	.color_select_area {
		margin-top: 30rpx;
		/* display: flex; */
		/* flex-direction: row; */
	}

	.color_select_per {
		margin-right: 20rpx;
		padding: 10rpx;
	}

	.color_selected_per {
		padding: 10rpx;
		border: 2rpx solid;
		border-color: #01c6c1;
	}

	.color_unselect_per {
		padding: 10rpx;
		border: 2rpx solid;
		border-color: #909090;
	}

	.buy_number_main {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;
	}

	.buy_number_text {
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #6c6d74;
	}

	.jiajian_btn {
		margin-top: 30rpx;
	}

	.buy_now_btn_view {
		margin-top: 200rpx;
		display: flex;
		overflow: hidden;
		width: 90%;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}

	.add_cart_view {
		height: 100rpx;
		flex: 1;
		background-color: #fff;
		color: #000;
		border: 1px solid #848484;
		border-right: none;
		text-align: center;
		font-size: 40rpx;
		letter-spacing: 8rpx;
		border-radius: 50rpx 0 0 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.add_cart_view_without_buy_now {
		height: 100rpx;
		background-color: #01c6c1;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
		letter-spacing: 8rpx;
		border-radius: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.buy_now_view {
		height: 100rpx;
		flex: 1;
		background-color: #01c6c1;
		border: 1px solid #01c6c1;
		border-left: none;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
		letter-spacing: 8rpx;
		border-radius: 0 50rpx 50rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.data_content {
		height: calc(100vh - 50px);
		/* 允许垂直方向滚动 */
		overflow-y: auto;
	}
</style>